Surface — Design System

Brand, colour, type and UI system for Surface, a specialist SEO agency on the Gold Coast, Australia, driving growth for small and medium-sized businesses. Founded and run by David and Dara Rymarz. Positioning: we engineer search performance.

Sources this system was built from

The published site is at https://surfaceagency.com.au. Contact: enquiry@surfaceagency.com.au · (1800) 975 399.

Products / surfaces

There is one product: the marketing website. It has five page types — homepage, service pages, case studies (listing + detail), insights (hub, pillar pages, articles), and utility pages (about, contact, FAQ, legal, digital business cards). There is no app, no dashboard, no logged-in product. The "Surface Engine" shown on the homepage is an internal SEO platform; only screenshots of it exist in the source.

Content fundamentals

Voice: confident, precise, understated. Surface engineers search performance — methodical, measurable, commercial. Never hype, never buzzwords, never exclamation marks.

• Person. "We" for the agency, "you/your" for the client. First-person singular appears only where David speaks directly: "you're partnering directly with me and my core team."
• Casing. Sentence case for headlines and body. Eyebrows and small labels render UPPERCASE via CSS, but are written in sentence case in the markup.
• Spelling. Australian English throughout — optimise, colour, prioritise, rigour.
• Punctuation. Hyphens only. Never em or en dashes. Commas do the work a dash would: "We don't chase algorithms. We engineer search performance, methodically and measurably."
• Emoji. Never. The only non-alphabetic glyphs in use are ★ (review stars) and → (ghost-link arrows).
• Numbers are specific and sourced. 1,831% average organic growth · 2,480+ top-3 keyword placements · 98% client retention. Every chart carries "Organic traffic · Google Search Console" beneath it.
• Sentence rhythm. Short declarative, then a qualifying clause. "Proof, not promises. Every metric verified, every chart earned."
• Headline pattern. A flat statement, often a negation: "Numbers don't lie" · "Page one isn't luck. It's architecture." · "We don't do vanity metrics" · "Data first. Always." · "Don't take our word for it".
• Objection-handling is blunt, not defensive. "Anyone promising page one overnight is selling smoke." · "If a pitch is all promises and no process, walk."
• Sections are numbered. The homepage runs 01–09 as chapter eyebrows: The philosophy · Services · Our Approach · Results · Method · Infrastructure · Proof · The Promise · Connect.
• CTA copy. "Start the conversation" · "Get your free audit" · "View case studies" · "Enquire" · "Explore our services →".

Do not write: "unlock", "leverage", "supercharge", "game-changing", "in today's digital landscape", any em dash, any emoji, or a claim without a number behind it.

Visual foundations

Palette. Warm and earthy but restrained. Ink #0E0E0E on Paper #F1EFEB (bone off-white) carries almost everything. Terracotta #E49366 is the single accent — CTAs, the nav dot, the giant footer wordmark, and one section panel per page. Four muted panel tints rotate down a page for rhythm: blue-grey #BFCCD8, light sage #A8BFA0, sage #798E7B, dusty rose #BE91A3. Warm greys (#9A958C, #D8D2C8, #E8E3DA) handle borders and muted text. Maximum two background colours are in play at once; adjacent sections change colour rather than draw a divider.

Themes. Everything must work in body.light-mode (bone, the default for content) and body.dark-mode (near-black, used for the hero, contact, footer and case-study strips). Style through --bg / --text / --surface-border; never hardcode #000 or #fff on text.

Type. Owners Wide (Adobe Fonts) for every headline — weight 400, sentence case, letter-spacing: 2px, line-height: 0.95. DM Sans for body (16px / 1.6) and leads (18px / 1.6). Small labels are DM Sans 10px, weight 700, UPPERCASE, zero tracking. Nothing else. Headlines break by meaning with <br>, never to fill a line.

Corners. Square. A global reset forces border-radius: 0 !important on every image and picture. The only round shapes in the system are pill buttons (9999px), circular avatars (50%), and three deliberate exceptions: form fields and .btn-secondary at 6px, toasts and the guarantee banner at 12px, the modal card at 24px, and the "tablet" image frame at 30px outer / 14px inner.

Backgrounds. Flat colour only. No gradients anywhere except two functional ones: the sparkline area fill under result charts, and a linear-gradient(to top, rgba(0,0,0,.45), transparent) protection wash under text on full-bleed imagery. No patterns, no textures, no noise, no illustration.

Imagery. Real photography of real people — David and Dara at the desk, in meetings, on site. Warm natural light, no filters, no duotone, no black-and-white. Product shots are honest UI screenshots (SERP, AI visibility, local rankings). Full-bleed images fill half of a split section and stick (position: sticky; height: 100vh) while the copy column scrolls beside them. Screenshots that need framing get the white "tablet" treatment: #fff bezel, 20px padding, 30px radius, 0 30px 70px -30px rgba(0,0,0,0.28).

Borders and dividers. Hairline ink lines, never boxes. There are no borders between sections — the colour change is the separator. Within a section: horizontal rules are 2px and inset by the gutter at both ends; vertical column dividers are 1px and inset 36px top and bottom. Small list rows (article lists, takeaways) use 1px.

Cards have no card. Service, value, infrastructure and topic cards have no background, no border, no radius and no shadow — they are grid cells separated by inset hairlines. If you find yourself drawing a card outline, you have left the system.

Shadows. Almost none. Three exist: the tablet frame drop shadow above, 0 2px 24px rgba(0,0,0,0.06) on the frosted nav pill and trust toast, and -20px 0 60px rgba(0,0,0,0.1) on the open menu drawer. No inner shadows, ever.

Transparency and blur. Reserved for floating chrome only — the nav link pill, the trust toast, the menu backdrop (blur(8px)), the modal scrim (blur(20px)), and the small badge over philosophy images (blur(6px)). Content surfaces are always opaque.

Motion. Quiet. --transition-quiet: 250ms ease is the default for every hover. Reveals and panels ride cubic-bezier(0.16, 1, 0.3, 1): content fades in over 0.9s with a 40px rise, staggered children at 0.7s / 30px. Accordions animate grid-template-rows from 0fr to 1fr. No bounce, no spring, no scale-on-press. prefers-reduced-motion is respected everywhere.

Hover states. Buttons invert fill and text. Ghost links run a left-to-right underline wipe. Nav links grow an underline from the left. Dimmed elements return to full opacity (step numbers 0.1 → 1, ledger logos 0.6 → 1, article rows to 0.65). Images scale a restrained 1.02–1.04. Arrows shift 4px. There is no press/active state — Surface never shrinks or darkens on click.

Layout. Full-bleed sections with a responsive gutter (clamp(32px, 4vw, 80px), 20px on mobile) and a 1400px content maximum. Section padding is 140px vertical (60px on mobile). Grids are 4-across (stats, method, engine), 3-across (services, values), or 2-across (splits, insights topics). The nav is fixed and never opaque; the guarantee banner and trust toast are fixed bottom-left; the footer is revealed by the page sliding up over it.

Iconography

Surface has no icon set, and that is deliberate. There is no icon font, no sprite sheet, no Lucide/Heroicons dependency, and no PNG icons in the source. What exists:

• Six inline SVGs, total. A chevron (M6 9l6 6 6-6) for accordions, arrow-left/right for carousel controls, a diagonal arrow for the guarantee banner, a tick for "Verified", and LinkedIn/Facebook glyphs in the menu footer. All are 1.5 stroke weight, fill="none", stroke="currentColor", round caps and joins — Feather-style geometry. Copy that geometry if you need a new one; do not import a library.
• A data-URI chevron for select carets, inlined in CSS with the fill colour swapped per theme.
• Two text glyphs used as icons. ★ for review stars (4px tracking) and → appended to ghost-link labels. × for close buttons.
• A 7px terracotta dot before the "Enquire" nav label, and a 6px currentColor dot before the "Menu" toggle. These are <span>s, not icons.
• Client logos are SVGs painted as CSS masks, never <img> — one asset then works on bone and on ink. See ClientLogo.

Never add emoji, an icon library, or a decorative illustration. If a section needs a visual, it gets a photograph.

Brand assets live in assets/logos/: Surface-Icon.svg (the mark, 24px in the nav), Surface-Text.svg (the wordmark, masked in terracotta at full page width in the footer), Surface-Logo-Copyright.svg, Surface-Logo-Strapline.svg. Client marks are in assets/logos/clients/.

Components

Grouped by concern under components/. Every family below has a counterpart in css/surface.css — nothing here was invented.

buttons/ — Button (variants: pill, inverted, secondary, ghost) typography/ — Eyebrow, DisplayHeading, SectionHeader cards/ — ServiceCard, InfraCard, ValueCard, TopicCard data/ — StatItem, ResultRow, ClientLogo content/ — TestimonialCard, ProcessStep, KeyTakeaways, ArticleRow disclosure/ — Accordion forms/ — Input, Select, Textarea feedback/ — Modal, TrustToast, GuaranteeBanner navigation/ — NavBar, Footer, MenuOverlay

Intentional additions

• SectionHeader — a composition of Eyebrow + DisplayHeading + lead paragraph. The pattern appears verbatim on ~15 sections of the live site but has no single class there; bundling it prevents drift.
• ClientLogo — a thin wrapper over the mask-image idiom the site uses inline in four different sizes. Wrapping it stops anyone reaching for <img>.

Not built (deliberately)

The site has no Tabs, Toast queue, Tooltip, Badge, Switch, Checkbox, Radio, Pagination, Breadcrumb or Table. Do not add them.

Known discrepancies (CSS wins)

Read these before trusting DESIGN-SYSTEM.md alone:

1. Eyebrows are not mono. The doc says owners-mono for eyebrows, labels and button text. A late override in surface.css maps every label to DM Sans 10px / 700 / UPPERCASE / no tracking, and .surface-mono itself now resolves to --font-body. The tokens keep --font-mono for fidelity, but nothing renders in it.
2. owners-mono has no font file. The live site never loads one either; it falls back to generic monospace. No substitute has been made — see Font caveats.
3. .surface-display is not uppercase. The base rule sets text-transform: uppercase, but the site-level rule resets it to none and adds letter-spacing: 2px. Headlines are sentence case.
4. --btn-radius is a pill, --fs-monumental (288px) is unused on any current page.

Font caveats

• Owners Wide and Owners are Adobe Fonts (Typekit kit eyz6gwy). tokens/fonts.css declares them against the same absolute Typekit CDN URLs the live site uses, so they render here — but that is not a licensed distribution path. In production, load the Typekit kit CSS. Unbounded (Google Fonts) is declared as the fallback, exactly as the site's --font-display stack does.
• DM Sans ships with this system (assets/fonts/, variable 400–600).
• Owners Mono is missing. Please upload the file if you have it.

Index